<template>
  <div class="layout-container">
     <el-form
          ref="refruleForm"
          :model="form"
          :rules="rules"
          label-width="130px"
          style="width:50%; margin: 100px auto;"
        >
          <el-form-item label="管理员姓名：" prop="content">
            <div class="admin-name">{{userName}}</div>
          </el-form-item>
          <el-form-item label="原密码：" prop="old_pwd">
            <el-input type="password" v-model="form.old_pwd" placeholder="请输入原密码" />
          </el-form-item>
          <el-form-item label="新密码：" prop="new_pwd">
            <el-input type="password" v-model="form.new_pwd" placeholder="请输入原密码" />
          </el-form-item>
          <el-form-item label="重置密码：" prop="reset_pwd">
            <el-input type="password" v-model="form.reset_pwd" placeholder="请输入原密码" />
          </el-form-item>
          <el-form-item>
            <!-- <el-button style="width:160px;" @click="handleCancel">取消</el-button> -->
            <el-button style="width:160px;" type="primary" @click="handleSubmit">提交修改</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>

<script setup lang="ts">
import md5 from "js-md5";
import { defineComponent, ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex'
import { changePassword } from "@/api/service/user.ts";
import { regPwd } from "@/utils/reg.ts";

const router = useRouter();
const route = useRoute();
const store = useStore();
const pageHeader = ref('新建项目通知');

// 从缓存中获取管理员姓名
const userName = ref('');
if (localStorage.getItem('LoginInfo')) {
  let loginInfo = JSON.parse(localStorage.getItem('LoginInfo'))
  userName.value = loginInfo.user_name;
}

const refruleForm: any = ref(null);
const form: any = reactive({
  password: ''
});

// 必填校验
const rules = reactive({
  old_pwd: [
    {
      required: true,
      message: "请输入原密码",
      trigger: "blur",
    },
  ],
  new_pwd: [
    {
      required: true,
      trigger: "blur",
      validator: (rule: any, value: any, callback: any) => {
        let reg = regPwd;
        if (!reg.test(value)) {
          return callback(new Error("密码长度至少8位，密码含有数字和字母"));
        } else{
          return callback()
        }
      }
    }
  ],
  reset_pwd: [
    {
      required: true,
      message: "请输入重置密码",
      trigger: "blur",
    },
  ],
});
// 确认发送
const handleSubmit = () => {
  refruleForm.value.validate((valid: Boolean) => {
    if (valid) {
      changePasswordFun()
    } else {
      console.log("error submit!!");
      return false;
    }
  });
}
// 更新管理员密码
const changePasswordFun = () => {
  if (form.reset_pwd !== form.new_pwd) {
    ElMessage.error("新密码与重置密码需要保持一致");
    return;
  }
  let data = {
     new_pass_word: md5(form.new_pwd),
     ole_pass_word: md5(form.old_pwd)
  }
  changePassword(data).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success("密码修改成功");
      // 清空记住密码
      localStorage.setItem('rinfo', '');
      setTimeout(() => {
        store.dispatch('user/loginOut')
      }, 1000)
    }
  })
}

</script>

<style lang="scss" scoped>
.layout-container{
  height: auto;
  .admin-name{
    text-align:left;
    // font-weight: bold;
  }
  :deep(.el-form-item__label){
    font-weight: bold;
  }
}
</style>
